/*
 *  A Dialog GUI component
 *  
 *   NOTE: this is used with XHTML
 *  
 */
var Dialog = function(person, id){
    // Instance attributes
    this.person = person;
    if( id ){
        this.id = id;
    }
}

// Shared methods
Dialog.prototype = (function(){ 
     
    var CLASS = "dialog"; 
    
    // Public API
    return{
        addHandler: function( handler ){
            this.handler = handler;
        },
        
        setParent: function( selector ){
            this.parent = selector;  
        },
           
        render: function(){
            if( ! this.parent ){ // Should work for null and undefined
                throw "No parent defined";
            }
           
            var html = this.toHtml();
            // Must render befor attaching listeners (will overwrite)
            $(this.parent).html(html);
            // "this" will be the control inside listener function
            var self = this; 
            
            // Eventhandler
            $(this.parent).find("#save")  
            .on('click', function(){
                var person = {};
                person.pnumb =  $(self.parent).find("#pnumb").val();
                person.fname = $(self.parent).find("#fname").val();
                person.age = $(self.parent).find("#age").val();
                if( self.handler ){
                    self.handler( "save", person ) // if defined!
                }
                $(self.parent).html("");  
            }); 
            $(this.parent).find( "#cancel").click(function(){
                $(self.parent).html("");
            });
            $(this.parent).find( "#del").click(function(){
                var person = {};
                person.pnumb =  $(self.parent).find("#pnumb").val();
                person.fname = $(self.parent).find("#fname").val();
                person.age =  $(self.parent).find("#age").val();           
                self.handler( "del", person );
                $(self.parent).html("");
            });
        },
        // This is EXTREMLY when using Xhtml every single space, quote, etc must be correct!!!
        toHtml : function(){
            var person = this.person || {
                pnumb:"", 
                fname:"", 
                age:""
            };
            // This should of course be configurable
            var html;
            if( this.id ){
                html = "<div id='"+ this.id +"' class='"+ CLASS + "'>"; 
            }else{
                html = "<div class='"+ CLASS + "'>"; 
            }
            html += "<table>"  
            + "<tr><td><label for='pnumb'>PNumb</label></td><td>"
            + "<input id='pnumb' type='text' size='6' value='"+ person.pnumb + "'/></td></tr>" 
            + "<tr><td><label for='fname'>FName</label></td><td>" 
            + "<input id='fname' type='text' size='14' value='"+ person.fname + "'/></td></tr>" 
            + "<tr><td><label for='age'>Age</label></td><td>" 
            + "<input id='age' type='text' size='6' value='"+ person.age +"'/></td></tr>" 
            + "</table>"
            + "<input id='save' type='button' value='Save'/>" 
            + "<input id='cancel' type='button' value='Cancel'/>"
            + "</div>";
            return html;
        }
    }
})();


